<!DOCTYPE html>
<html lang="zh-CN"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{layui/css/layui.css}" media="all">
</head>
<style type="text/css">
    .layui-table-cell {
        height: 50px;
        /*line-height: 28px;*/
        padding: 0 15px;
        position: relative;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        box-sizing: border-box;
        vertical-align: middle;
        text-align: center;
    }

    .layui-table img {
        max-width: 100px;
        max-height: 100px;
        margin-top: 10px;
    }
    .layui-form-item {
        margin-bottom: 15px;
        clear: both;
        *zoom: 1;
        margin-left: -80px;
    }
</style>
<body>
<table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
    </div>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="queryAdmin">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script th:src="@{layui/layui.js}" charset="utf-8"></script>
<script type="text/javascript" th:src="@{/shoppingApi/js/jquery-3.3.1.min.js}"></script>
<script type="application/javascript" th:src="@{/shoppingApi/js/common.js}"></script>
<!--<script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>-->
<script th:inline="none">
    layui.use('table', function () {
        var table = layui.table;
        table.render({
            elem: '#test'
            , url: '/getAdminRolePrivilegeData'
            , cellMinWidth: 80
            , toolbar: '#toolbarDemo'
            , title: '用户数据表'
            , totalRow: true
            , cols: [[
                {type: 'checkbox', fixed: 'left'}
                , {field: 'adminId', title: '管理员ID'}
                , {field: 'adminName', title: '用户名'}
                , {field: 'realName', title: '真实姓名'}
                , {field: 'rName', title: '角色名称'}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo'}
            ]]
            , page: true

        });

        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del();
                    //删除商品
                    var adminId = data['adminId'];
                    alert(adminId);
                    // delProduct(productId);
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                var adminId = data['adminId'];
                editAdminRolePrivilege(adminId);

            } else if (obj.event === 'queryAdmin') {
                var adminId = data['adminId'];
                window.location.href = '/openGuiGeDetails?productId=' +adminId;
            }
        });

        //头工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：' + data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选' : '未全选');
                    break;
            }
            ;
        });

        //复选框
        table.on('checkbox(test)', function(obj){
            console.log(obj.checked); //当前是否选中状态
            console.log(obj.data); //选中行的相关数据
            console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
        });

    });

    function Format(datetime, fmt) {
        if (parseInt(datetime) == datetime) {
            if (datetime.length == 10) {
                datetime = parseInt(datetime) * 1000;
            } else if (datetime.length == 13) {
                datetime = parseInt(datetime);
            }
        }
        datetime = new Date(datetime);
        var o = {
            "M+": datetime.getMonth() + 1,                 //月份
            "d+": datetime.getDate(),                    //日
            "h+": datetime.getHours(),                   //小时
            "m+": datetime.getMinutes(),                 //分
            "s+": datetime.getSeconds(),                 //秒
            "q+": Math.floor((datetime.getMonth() + 3) / 3), //季度
            "S": datetime.getMilliseconds()             //毫秒
        };
        if (/(y+)/.test(fmt))
            fmt = fmt.replace(RegExp.$1, (datetime.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt))
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }


    // layui.use('table', function () {
    //     var table = layui.table;
    //     table.render({
    //         elem: '#test'
    //         , url: '/getProductListData'
    //         , cellMinWidth: 80
    //         , toolbar: '#toolbarDemo'
    //         , title: '用户数据表'
    //         , totalRow: true
    //         , cols: [[
    //             {type: 'checkbox', fixed: 'left'}
    //             , {field: 'productId', title: '商品ID'}
    //             , {field: 'productName', title: '商品名称'}
    //             , {field: 'classifyName', title: '商品类别'}
    //             , {field: 'proImg', title: '商品图片', templet: '<div><img src="{{d.proImg}}" ></div>'}
    //             , {field: 'productUnit', title: '商品单位'}
    //             , {field: 'activeSignName', title: '活动专区'}
    //             , {field: 'productUpState', title: '上架状态', templet: '<div>{{d.productUpState=="Y"?"已上架":"未上架"}}</div>'}
    //             , {field: 'uptime', title: '上架时间', templet: '<div>{{ Format(d.uptime,"yyyy-MM-dd hh:mm:ss")}}</div>'}
    //             , {field: 'supplier', title: '供货商'}
    //             , {fixed: 'right', title: '操作', toolbar: '#barDemo'}
    //         ]]
    //         , page: true
    //
    //     });
    //
    //     //监听行工具事件
    //     table.on('tool(test)', function (obj) {
    //         var data = obj.data;
    //         //console.log(obj)
    //         if (obj.event === 'del') {
    //             layer.confirm('真的删除行么', function (index) {
    //                 obj.del();
    //                 layer.close(index);
    //             });
    //         } else if (obj.event === 'edit') {
    //             var productId = data['productId'];
    //             // window.location.href='/editorProduct?productIds='+productId;
    //             WinOpenAdd(productId);
    //             // layer.prompt({
    //             //
    //             //     formType: 2
    //             //     ,value: data.email
    //             // }, function(value, index){
    //             //     obj.update({
    //             //         email: value
    //             //     });
    //             //     layer.close(index);
    //             // });
    //         } else if (obj.event === 'queryGuiGe') {
    //             var productId = data['productId'];
    //             window.location.href = '/openGuiGeDetails?productId=' + productId;
    //         }
    //     });
    //
    //     //头工具栏事件
    //     table.on('toolbar(test)', function (obj) {
    //         var checkStatus = table.checkStatus(obj.config.id);
    //         switch (obj.event) {
    //             case 'getCheckData':
    //                 var data = checkStatus.data;
    //                 layer.alert(JSON.stringify(data));
    //                 break;
    //             case 'getCheckLength':
    //                 var data = checkStatus.data;
    //                 layer.msg('选中了：' + data.length + ' 个');
    //                 break;
    //             case 'isAll':
    //                 layer.msg(checkStatus.isAll ? '全选' : '未全选');
    //                 break;
    //         }
    //         ;
    //     });
    //
    // });
    //

    var body;
    function WinOpenAdd(adminId) {
        layer.open({
            type: 2
            , title: '编辑角色权限'
            , content: '/editAdmin?adminId=' + adminId
            , area: ['620px', '660px']
            , btn: ['确定', '取消']
            , yes: function (index, layero) {
                body = layer.getChildFrame('body', index); //得到iframe页的body内容
                // updateProductData();//保存修改的商品数据
            }
        });
    }

    // 删除管理的对应角色和权限
    function delAdmin(adminId) {
        $.ajax({
            url: '/delAdmin?adminId=' + adminId,
            success: function (res) {
                if (res.msg) {
                    layer.alert("删除成功！");
                } else {
                    layer.alert("删除失败！");
                }
            }
        })
    }
/*编辑管理员权限*/
function editAdminRolePrivilege(adminId){
    layer.open({
        type: 2
        , title: '编辑管理员角色权限'
        , content: '/editAdminRolePrivilege?adminId=' + adminId
        , area: ['620px', '660px']
        , btn: ['确定', '取消']
        , yes: function (index, layero) {
            body = layer.getChildFrame('body', index); //得到iframe页的body内容
            // updateProductData();//保存修改的商品数据
        }
    });
}


</script>


</body>

</html>